/* eslint-disable no-unused-vars */
import React, { useEffect, useState } from 'react'
import '../assets/styles/RecomMend.css'
import Tu01 from "../assets/imgs/Tu01.png"
import jiantou from "../assets/imgs/jiantou.png"
import Right from './Banner/Right'
export default function Recommend() {
    const [data,setDate] =useState([])
    useEffect(() => {
        recommend()
    },[])

    function recommend() {
        fetch(`http://jacklv.cn:3000/personalized/newsong`, {
            method: 'get',
            // body:JSON.stringify(value),
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;'
            },
        })
            .then(res => {
                // console.log("成功", res);
                if (res.status == 200) {
                    res.json().then(res => {
                        if (res.code == 200) {
                            // console.log("成功", res.result);
                            setDate(res.result)
                        }
                    })
                }
            })
            .catch(err => {
                // resk就是后端放回的结果
                console.log("失败1", err);
            })
    }
  return (
    <>
        <div className='body'>
        <div className='left'>
            <div className='headRecommend'>
                <div className='headLeft'>
                    <img className='tu' src={Tu01} alt="" />
                    <h3>热门推荐</h3>
                    <div className='leixing'>华语</div>
                    <div className='leixing'>流行</div>
                    <div className='leixing'>摇滚</div>
                    <div className='leixing'>民谣</div>
                    <div className='leixing'>电子</div>
                </div>
                <div className='headRight'>
                更多
                <img className='tu' src={jiantou} alt="" />
                </div>
            </div>
            <div className='RecommendCont'>
                {
                    data.map(item=>{
                        return (
                            <div className='RecommendDiv' key={item.id}>
                            <img className='RecommendDivimg' src={item.picUrl} alt="" />
                            <p>{item.name} </p>
                        </div>
                        )
                    })
                }

            </div>
        </div>
        <div className="right">
            <Right/>
        </div>
    </div>
    </>

  )
}